<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div class="container">
			<div class="top">
				<div class="fist_box">
					<div class="first_item">
						<span class="icon icon_rank">99</span>
						<span class="icon_text">卢克断手者</span>
					</div>
					<div class="first_item">
						<span class="icon icon_diamond">&nbsp;</span>
						<span class="icon_text">6688999</span>
					</div>
					<div class="first_item">
						<span class="icon icon_gold">&nbsp;</span>
						<span class="icon_text">999999</span>
					</div>
				</div>
				<div class="fist_box">
					<div class="second_item">
						<span class="icon icon_fight">&nbsp;</span>
						<div class="timer">
							<span>剩余时间<span style="color: #66cad8;">0:08</span></span>
							<span>57/120</span>
							<img src="images/textures/timer_bar.png" width="80%" height="5">
						</div>
					</div>
					<div class="second_item">
						<span class="icon icon_energy">&nbsp;</span>
						<div class="timer">
							<span>剩余时间<span style="color: #66cad8;">0:08</span></span>
							<span>57/120</span>
							<img src="images/textures/timer_bar.png" width="80%" height="5">
						</div>
					</div>
				</div>
				<div>
					<img style="margin-top: 10px;" src="images/textures/btn_message.png" height="38" width="46">
				</div>
			</div>
			<div class="bottom">
				<div class="fold">
					<img src="images/textures/btn_fold.png" width="49" height="15">
				</div>
				<div class="btns_sub">
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
					<div class="sub_icon icon_backpack">
						<img src="images/textures/txt_beibao.png" width="28" height="17">
					</div>
				</div>
				<div class="btns_main">
					<img src="images/textures/home_btns/btn_home.png" width="42" height="55">
					<img src="images/textures/home_btns/btn_level.png" width="42" height="55">
					<img src="images/textures/home_btns/btn_raid.png" width="42" height="55">
					<img src="images/textures/home_btns/btn_shop.png" width="42" height="55">
					<img src="images/textures/home_btns/btn_friends.png" width="42" height="55">
					<img src="images/textures/home_btns/btn_setting.png" width="42" height="55">
				</div>
			</div>
		</div>
		<script src="../../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				let isDown = false;
				$(".fold").click(function() {
					console.log(isDown);
					if (isDown) {
						$(this).addClass("fold_down2up");
						$(".btns_sub").addClass("sub_down2up");

						// $(this).removeClass("fold_down2up");
						// $(".btns_sub").removeClass("sub_down2up");
					} else {
						$(this).attr("class","fold fold_up2down");
						$(".btns_sub").attr("class","btns_sub sub_up2down");
						$(".btns_main").attr("class","btns_main main_up2down");
					}
					isDown = !isDown;
				});
			});
		</script>
	</body>
</html>
